/*
Modal
*/
.an-modal {
    --an-modal-backdrop: rgba(0, 0, 0, .5);
    --an-modal-zindex: 1000;
    --an-modal-min-width: 300px;
    --an-modal-bg: var(--an-color-bg);
    --an-modal-radius: var(--an-border-radius);
    --an-modal-shadow: var(--an-box-shadow);
    --an-modal-font-size: var(--an-font-size);
    --an-modal-padding: var(--an-padding);
    --an-modal-color-text-gray: var(--an-color-text-gray);
    --an-modal-color-hover-bg: var(--an-color-hover-bg);

    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--an-modal-backdrop);
    z-index: var(--an-modal-zindex);
    display: none;

    &[open] {
        display: block;
    }

    &[open] .an-modal-main {
        opacity: 1;
        transform: scale(1);
    }

    & .an-modal-backdrop {
        width: 100%;
        height: 100%;
    }

    & .an-modal-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    & .an-modal-main {
        min-width: var(--an-modal-min-width);
        background: var(--an-modal-bg);
        border-radius: var(--an-modal-radius);
        box-shadow: var(--an-modal-shadow);
        font-size: var(--an-modal-font-size);
        word-wrap: break-word;
        /* opacity: 0;
        transform: scale(0.5);
        transition: .2s ease-in; */
    }

    & .an-modal-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: calc(var(--an-modal-padding) * 2) calc(var(--an-modal-padding) * 2) var(--an-modal-padding) calc(var(--an-modal-padding) * 2);
        font-size: var(--an-modal-title-font-size);
        font-weight: 600;
    }

    & .an-modal-body {
        position: relative;
        padding: calc(var(--an-modal-padding) * 2);
    }

    & .an-modal-message {
        display: flex;
        align-items: center;

        & .an-icon {
            display: inline-flex;
            align-items: center;
            margin-right: 10px;
            font-size: 22px;
        }
    }

    & .an-modal-header+.an-modal-body {
        padding-top: var(--an-modal-padding);
    }

    & .an-modal-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: var(--an-modal-padding) calc(var(--an-modal-padding) * 2) calc(var(--an-modal-padding) * 2) calc(var(--an-modal-padding) * 2);
    }

    & .an-modal-footer .an-button+.an-button {
        margin-left: var(--an-modal-padding);
    }

    & .an-modal-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        font-size: 22px;
        color: var(--an-modal-color-text-gray);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    & .an-modal-close:hover {
        background-color: var(--an-modal-color-hover-bg);
    }
}